<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-20 18:11:21
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-19 13:50:51
 * @FilePath: \company-world\src\views\menuManagement\components\MenuHeader.vue
 * @Description: 角色用户
-->
<template>
  <div class="menu-table">
    <!-- 新增头部 -->
    <div class="title-button">
      <div class="title">角色用户</div>
      <div class="button">
        <el-button v-if="usePermission('role.add')" :icon="Plus" color="#6C52EA" @click.stop="handleAddClick">添加用户</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-content">
      <el-table
        v-loading="loading"
        class="table"
        default-expand-all
        ref="multipleTableRef"
        :data="dataList"
        style="width: 100%"
        row-key="id"
        :header-cell-style="{
          background: 'rgb(250, 250, 250)',
          fontSize: '14px',
          fontWeight: '700',
          letterSpacing: '0px',
          lineHeight: '0px',
          color: 'rgba(55, 59, 69, 1)',
          textAlign: 'center'
        }"
        :cell-style="{
          fontSize: '14px',
          fontWeight: '400',
          letterSpacing: '0px',
          lineHeight: '0px',
          color: 'rgba(49, 53, 64, 1)',
          textAlign: 'center'
        }"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <p>{{ dataArrList }}</p>
        <el-table-column type="selection" width="55" />
        <el-table-column label="名称">
          <template #default="{ row }">
            <span>
              <i :class="['iconfont', row.icon]" class="icon-color" />
              {{ row.userName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column property="phone" label="手机号" />
        <el-table-column label="操作" width="150px">
          <template #default="{ row }">
            <el-popconfirm title="确定要删除这个用户吗？" @confirm="removeRow(row.id)">
              <template #reference><el-button :disabled="!usePermission('role.delete')" link type="danger">删除</el-button></template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <AddUser
      :dialog="dialog"
      :cheackId="cheackId"
      :roleDatas="props.roleDatas"
      @dialogClose="dialogClose"
      @dialog-add-save="dialogAddSave"
    ></AddUser>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineExpose, reactive, PropType, watch } from 'vue'
import { IRole, Itype, IUser } from '@/type/index'
import { Plus } from '@element-plus/icons-vue'
import { usePermission } from '@/hooks/usePermission'
import { useRouter } from 'vue-router'
import { getMenuList, deleteMenuData } from '@/apis/jurisdiction/menu'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddUser from './AddUser.vue'
import { editUserData, getUserList } from '@/apis/system/userInfo'
const props = defineProps({
  roleDatas: {
    type: Object as PropType<IRole>,
    required: false,
    default: () => {}
  }
})

const cheackId = ref()
let dataArrList: any = []

/**
 * @desc:获取用户
 */
let pager = ref({
  page: 1,
  size: 10,
  total: 0
})
const loading = ref(false)
let total: Itype = ref(0)
let dataList: Itype = ref()
const getData = () => {
  loading.value = true
  getUserList()
    .then((res) => {
      if (res) {
        dataList.value = res
        dataList.value.forEach((element: Itype) => {
          element.created_at = new Date(
            +new Date(new Date(element.created_at).toJSON()) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
        })
        if (props.roleDatas) {
          dataList.value = dataList.value.filter(
            (element: any) => element.role_id === props.roleDatas.id && !element.is_role
          )
        }
      }
      loading.value = false
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}

watch(
  () => props.roleDatas,
  (newVal) => {
    dataArrList = newVal
    newVal && getData()
  },
  { immediate: true }
)

/**
 * @desc:新增
 */
const dialog = ref(false)
const handleAddClick = () => {
  if (!props.roleDatas) {
    ElMessage.error('请先选择父级角色！')
    return false
  }
  dialog.value = !dialog.value
}
const dialogClose = () => {
  dialog.value = !dialog.value
}

/**
 * @desc: 筛选数据
 */
const filterItem = (item: Itype, name: string) => {
  if (item.name.indexOf(name) !== -1) return true
  if (item.children) {
    item.children = item.children.filter((sonEle: Itype) => {
      return filterItem(sonEle, name)
    })
    if (item.children.length > 0) {
      return true
    }
  }
  return false
}
/**
 * @desc: 菜单类型颜色
 */
const getColor = (type: string) => {
  if (type === '菜单') {
    return '#E4D155'
  } else if (type === '菜单组') {
    return '#C18DFF'
  } else {
    return '#FF779A'
  }
}
/**
 * @desc:添加保存
 */
const emit = defineEmits(['reFresh', 'send-remove'])
const dialogAddSave = () => {
  dialog.value = !dialog.value
  emit('reFresh')
}
/**
 * @desc:删除
 *
 */
/**
 * @desc:删除
 */
const removeRow = (id: number) => {
  ElMessageBox.confirm(`您确定要删除此用户吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    lockScroll: false
  })
    .then(() => {
      // dataList.value = dataList.value.filter((item: { id: number }) => item.id !== id)
      // ElMessage.success('操作成功！')
      editUserData({
        is_role: 1,
        _id: id
      }).then((res) => {
        if (res) {
          ElMessage.success('操作成功！')
          emit('reFresh')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消'
      })
    })
}
/**
 * @desc:打开编辑弹窗
 */
let editList: Itype = ref()
let dialogTitle = ref('')
const onEdit = (row: []) => {
  // getData()
  dialog.value = !dialog.value
  editList.value = row
  dialogTitle.value = '新增用户'
}
/**
 * @desc:筛选
 */
const onSearch = (data: string) => {
  // searchList.value = []
  // getData(data)
}
/**
 * @desc: 筛选数据
 */
// const filterData = (dataObj: Isearch, searchObj: Isearch, data: string) => {
//   dataObj.forEach((item: Isearch) => {
//     if (item.name.includes(data)) {
//       searchObj.push(item)
//     }
//     if (item.children && item.children.length > 0) {
//       filterData(item.children, searchList.value, data)
//     }
//   })
// }
/**
 * @desc:重置
 */
const onRefresh = () => {
  // search.value = []
  // getData()
}
defineExpose({
  // getData,
  onRefresh
})
</script>

<style lang="less" scoped>
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  border-color: #6c52ea;
  background-color: #6c52ea;
}
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  border-color: #6c52ea;
  background-color: #6c52ea;
}
:deep(.el-checkbox__inner:hover) {
  border-color: #6c52ea;
}
:deep(.el-table) {
  thead {
    height: 48px;
  }
  .cell {
    overflow: hidden;
    padding: 0 3px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    word-break: break-all;
    line-height: 23px;
    white-space: nowrap;
    white-space: normal;
  }
  .icon-color {
    color: #6c52ea;
  }
}
.menu-table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin-top: 8px;
  padding: 8px 18px 8px 10px;
  box-sizing: border-box;
  background-color: #fff;
  .table-content {
    overflow: auto;
    flex-grow: 1;
    width: 100%;
    height: 0;
    flex-shrink: 0;
    .table {
      .el-tag {
        display: inline-block;
        height: 22px;
        padding: 0 8px;
        box-sizing: border-box;
        background-color: #ecf5ff;
        color: #fff;
        line-height: 22px;
        font-size: 12px;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        border-color: #d9ecff;
        white-space: nowrap;
      }
    }
  }
}
.el-table__header-wrapper {
  border: 1px solid #ff0000;
}
.title-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  box-sizing: border-box;
  .title {
    color: rgba(0, 0, 0, 0.65);
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s;
  }
  .button {
    .el-button {
      height: 28px;
      font-size: 13px;
    }
  }
}
</style>
